import { useState, useEffect, useCallback } from 'react'
import { WhiteSpace, Flex } from 'antd-mobile'
import { Icon, Descriptions, Empty } from 'antd'
import QRCode from 'qrcode.react'
import router from 'umi/router'
import services from '@/services'
import openModal from '@/components/modal/info'
import styles from './index.scss'

const { SBMy, SBQQue } = services

const Index = () => {
  const [cards, setCards] = useState([])
  const openId = localStorage.getItem('openId')
  useEffect(() => {
    if (openId) {
      SBMy({
        sign: `${openId}$$##1234ech**`.MD5(32),
        data: openId
      })
        .then(res => {
          console.log('我的预约列表', res)
          if (res.success) {
            setCards(res.data.queues)
          }
        })
    }
  }, [openId])
  return (
    <div className={styles.wait}>
      <WhiteSpace />
      <div className={styles.title}>我的待办</div>
      {
        cards.length
          ? cards.map(i => <Card_ card={i} onClick={() => router.push(`/offices`)} key={i.code} />)
          : <Empty description='暂无待办'/>
      }
    </div>
  )
}

const Card_ = ({ card }) => {
  const openId = localStorage.getItem('openId')
  const { code, name, qrCode, branch, state, items = [] } = card

  const onActiveClick = useCallback(() => { // 查看排队号详情
    const data = {
      openId,
      code
    }
    SBQQue({
      sign: `${data}$$##1234ech**`.MD5(32),
      data: data
    })
      .then(res => {
        if (res.success) {
          const { branch, queueNo, state, takeTime, wsno, qrCode } = res.data
          const Info = () => {
            return (
              <>
                <Descriptions title="排队号详情">
                  <Descriptions.Item label="网点名称">{branch}</Descriptions.Item>
                  <Descriptions.Item label="排队号">{queueNo}</Descriptions.Item>
                  <Descriptions.Item label="业务类别">{name}</Descriptions.Item>
                  <Descriptions.Item label="状态">{state}</Descriptions.Item>
                  <Descriptions.Item label="取号时间">{takeTime}</Descriptions.Item>
                  <Descriptions.Item label="办理柜台">{wsno}</Descriptions.Item>
                </Descriptions>
                <WhiteSpace />
                <Flex justify='center' direction='column'>
                  <p>二维码</p>
                  <QRCode
                    value={qrCode}  // value参数为生成二维码的链接
                    size={120} // 二维码的宽高尺寸
                    fgColor="#000000"  // 二维码的颜色
                  />
                </Flex>
                <WhiteSpace />
              </>
            )
          }
          openModal(Info)
        }
      })
  }, [])

  return (
    <div className={styles.card}>
      <div className={styles.code}>
        <QRCode
          value={qrCode}  // value参数为生成二维码的链接
          size={60} // 二维码的宽高尺寸
          fgColor="#000000"  // 二维码的颜色
        />
      </div>
      <div className={styles.content} onClick={onActiveClick}>
        <div className={styles.title}><Icon type="unordered-list" className={styles.icon} /><span>{name}-{branch}</span></div>
        <div className='flex justify-between'>
          <div className={styles.desc}>
            <div>排队号：<span>{code}</span></div>
            <div>状态：<span>{state}</span></div>
            {/* <div>前方还有：<span className={styles.red}>{before}</span> 人</div>
            <div>预计等候：<span>{time}</span> 分钟</div> */}
          </div>
          <div className={styles.more}>
            <div>办理业务</div>
            <div className={styles.moreContent}>
              {
                items.map(i => (
                  <div key={i.name}>{i.name}</div>
                ))
              }
            </div>
          </div>
          <div className='flex align-center'><Icon type='right' /></div>
        </div>
      </div>
    </div>
  )
}

export default Index
